<template>
  <div>
    <h2>计算属性</h2>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>

    <h2>使用methods方法</h2>
    <p>{{ getFullName() }}</p>
    <p>{{ getFullName() }}</p>
    <p>{{ getFullName() }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '张',
      ming: '三'
    }
  },
  // data里面放数据；methods里面放方法；computed里面放计算属性
  computed: {
    // 计算属性 () {
    //   return '计算的结果'
    // }
    fullName () {
      console.log('计算属性调用了')
      return this.xing + this.ming
    }
  },
  methods: {
    getFullName () {
      console.log('方法调用了')
      return this.xing + this.ming
    }
  }
}
</script>

<style>

</style>